<!--
  @Description:搭配套餐分页查询
  @Author:zqy
  @Date:2024-08-26 10:23:00
  @Last Modified by:zqy
  @Last Modified time:2024-08-26 10:23:00
-->
<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    width="800px"
    title="搭配套餐选择"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="closeDialog"
  >
    <div class="table-main">
      <table-box
        ref="refTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :table-height="400"
        table-row-key="id"
        :selected-arry.sync="tableSelected"
        :table-row-class-name="tableRowClassName"
        :show-custom-setting="false"
        :show-custom-combine="false"
        :table-sortable="false"
        @data-change="tableDataChange"
        @row-dblclick="dbClickRow"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button type="primary" size="mini" @click="handleSure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DlgProductCombinationList',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectedId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      otherFilters: [
        { id: 'enabled', property: 'enabled', operator: '=', value: 1 }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productCombination/voPage`,
        onlySearchBar: true,
        tabIndex: 997,
        sort: 'lastUpdateTime',
        order: 'desc',
        setting: [
          {
            prop: 'name',
            label: '搭配名称',
            minWidth: 200
          },
          {
            prop: 'createBy',
            label: '创建人',
            width: 120,
            type: 'hidden'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 150,
            type: 'hidden'
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            width: 120,
            type: 'hidden'
          },
          {
            prop: 'lastUpdateTime',
            label: '修改时间',
            width: 150,
            type: 'hidden'
          }
        ]
      },
      tableSelected: [] // 单选行
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      /* if (row.id === this.selectedId) {
        this.tableSelected = [row]
      }
      return row.id === this.selectedId ? 'selected-highlight' : '' */
    },
    tableDataChange(res) {

    },
    dbClickRow(row, e) {
      this.tableSelected = [row]
      this.handleSure()
    },
    handleSure() {
      if (this.tableSelected.length === 0) {
        this.$message.warning('请选择搭配套餐')
        return
      }
      this.$emit('change', this.tableSelected[0])
      this.closeDialog()
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
